<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
	<title>Bootstrap</title>

    <!-- Bootstrap -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-1.11.3.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
  </head>
  <body>
	  <!-- 轮播图 data-interval 1000 一秒-->
	  <!-- 多个轮播图 必须修改id lbt1 -->
    <div id="lbt1" class="carousel slide" data-ride="carousel" data-interval="1000">
      <!-- 小圆点 -->
      <ol class="carousel-indicators">
        <li data-target="#lbt1" data-slide-to="0" class="active"></li>
        <li data-target="#lbt1" data-slide-to="1"></li>
        <li data-target="#lbt1" data-slide-to="2"></li>
		 <li data-target="#lbt1" data-slide-to="3"></li>
      </ol>
    
      <!-- 轮播图 图片主体部分 -->
	  <div class="carousel-inner" role="listbox">
		<div class="item active">
		  <img src="../img/huo00.jpg"/>
		  <div class="carousel-caption">
			图片0的说明信息
		  </div>
		</div>
		<div class="item">
		  <img src="../img/huo01.jpg"/>
		  <div class="carousel-caption">
			图片1的说明信息
		  </div>
		</div>
		<div class="item">
		  <img src="../img/huo02.jpg"/>
		  <div class="carousel-caption">
			图片2的说明信息
		  </div>
		</div>
		<div class="item">
		  <img src="../img/huo03.jpg"/>
		  <div class="carousel-caption">
			图片3的说明信息
		  </div>
		</div>
	  </div>
	
	  <!-- 左右控制按钮 -->
	  <a class="left carousel-control" href="#lbt1" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	  </a>
	  <a class="right carousel-control" href="#lbt1" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	  </a>
	</div>
  </body>
</html>